<template>
  <view class="w-full min-h-screen bg-[#f6f6f6]">
    <!-- 用户信息区域 -->
    <view class="flex items-center bg-[#000] p-[40rpx] pb-[120rpx]">
      <image
        :src="userStore.info.avatar"
        class="w-[120rpx] h-[120rpx] rounded-full border-2 border-orange-500 bg-[#eee]"
      />

      <view class="flex flex-col ml-[30rpx] gap-2">
        <text class="text-[32rpx] text-[#fff] font-medium">{{
          userStore.info.nickname
        }}</text>
        <nut-button
          class="mx-auto flex items-center"
          size="small"
          type="primary"
          @tap="login"
        >
          {{ userStore.info.nickname ? '我的资料' : '登陆'}}
        </nut-button>
      </view>

      <text class="absolute right-[24rpx] top-[24rpx] text-[24rpx] text-[#fff]">{{ useUserStore.info?.isworker ? '工人' : '用户' }}</text>
    </view>

    <view class="mt-[-80rpx]">
      <!-- 订单中心 -->
      <view class="mx-[30rpx] mt-[30rpx] bg-[#fff] rounded-[16rpx] p-[30rpx]">
        <!-- <text class="block text-[32rpx] font-bold mb-[30rpx]">订单中心</text> -->

        <!-- 全部订单 -->
        <view class="flex justify-between items-center mb-[30rpx]">
          <text class="text-[28rpx]">全部订单</text>
          <view class="flex items-center">
            <text class="text-[24rpx] text-gray-500 mr-[10rpx]" @tap="jump(999)"
              >查看全部</text
            >
            <!-- <image src="http://www.dzgktf.com/templets/default/images/wtyt.jpg" class="w-[24rpx] h-[24rpx]" /> -->
          </view>
        </view>

        <!-- 订单状态 -->
        <view class="grid grid-cols-4 gap-y-[40rpx]">
          <view
            class="flex flex-col items-center"
            v-for="item in orderStatus"
            :key="item.text"
            @tap="jump(item.id)"
          >
            <!-- <image src="http://www.dzgktf.com/templets/default/images/wtyt.jpg" class="w-[60rpx] h-[60rpx] mb-[10rpx]" /> -->
            <IconFont
              font-class-name="iconfont"
              class-prefix="icon"
              :name="item.name"
              size="40"
              class="mb-[10rpx]"
              color="#ff9800"
            />
            <text class="text-[24rpx]">{{ item.text }}</text>
          </view>
        </view>
      </view>

      <!-- 功能列表 -->
      <view class="mx-[30rpx] mt-[30rpx] bg-[#fff] rounded-[16rpx] px-[30rpx]">
        <view
          class="flex items-center py-[30rpx] border-0"
          v-for="(item, index) in menuList"
          :key="item.text"
          @tap="fun(item)"
        >
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            :color="item.color"
            :name="item.name"
            size="28"
            class="mr-[20rpx]"
          />
          <text class="flex-1 text-[28rpx]">{{ item.text }}</text>
          <IconFont name="right" color="#ccc"></IconFont>
        </view>

        <button
          open-type="share"
          class="flex items-center py-[30rpx] border-0"
        >
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            color="#e91e63"
            name="JC_054"
            size="28"
            class="mr-[20rpx]"
          />
          <text class="text-[28rpx] mr-auto">分享好友</text>
          <IconFont name="right" color="#ccc"></IconFont>
        </button>

        <button
          open-type="contact"
          class="flex items-center py-[30rpx] border-0"
        >
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            color="#e91e63"
            name="kefu1"
            size="28"
            class="mr-[20rpx]"
          />
          <text class="text-[28rpx] mr-auto">联系客服</text>
          <IconFont name="right" color="#ccc"></IconFont>
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";

import { IconFont } from "@nutui/icons-vue-taro";
import { useUserStore } from "@/stores/index";

// 获取用户信息
const userStore = useUserStore();

userStore.doGetInfo();

// 订单状态数据
const orderStatus = ref([
  { text: "未接单", id: 0, name: "dingdan4" },
  { text: "待评估", id: 1, name: "dilanxianxingiconyihuifu_huabanfuben" },
  { text: "待施工", id: 2, name: "order-fill" },
  { text: "施工中", id: 3, name: "dingdan6" },
  { text: "已完工", id: 4, name: "dingdan7" },
  { text: "已完成", id: 5, name: "dingdanyichenggong" },
  { text: "已关闭", id: -1, name: "dingdan8" },
]);

// 菜单列表数据
const menuList = ref([
  { text: "我的资料", name: "wode-wode", color: "#2196F3" },
  // { text: '优惠券', name: 'wode-wodeyouhuiquan',color: '#e91e63'  },
  // { text: "联系客服", name: "kefu1", color: "#00bcd4" },
  { text: "用户隐私", name: "wode-wodedingdan", color: "#ff9822" },
  // { text: '分享好友', name: 'JC_054',color: '#fe3bff'  },
]);

const jump = (id) => {
  // 跳转逻辑，这里可以根据实际需求实现跳转到不同页面
  // console.log(`跳转到 ${item.text} 页面`)
  Taro.navigateTo({
    url: `/pages/order/detail?id=${id}`,
  });
};

const login = () => {
  // 登录逻辑，这里可以根据实际需求实现登录功能
  userStore.doLogin();
};

const fun = (item) => {
  // 功能点击逻辑
  console.log(`点击了 ${item.text}`);
  if (item.text === "用户隐私") {
    Taro.navigateTo({
      url: "/other/mine/privacy",
    });
    return;
  }
  if (item.text === "我的资料") {
    Taro.navigateTo({
      url: "/other/mine/info",
    });
    return;
  }
  Taro.navigateTo({
    url: `/pages/mine/${item.name}`,
  });
};

function getPhoneNumber(e) {
  console.log("e", e);
  if (e.detail.errMsg === "getPhoneNumber:ok") {
    const { encryptedData, iv } = e.detail;
    // 这里需要将 encryptedData 和 iv 发送到服务器端进行解密
    console.log("加密数据：", encryptedData);
    console.log("加密算法的初始向量：", iv);
  } else {
    console.log("用户拒绝授权获取手机号");
  }
}
</script>

<style>
/* 重置按钮样式 */
button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 1;
}

button::after {
  border: none;
}

/* 全局样式调整 */
page {
  background-color: #fff;
}
</style>
